<template>
  <div class="home">
  <!-- ====== 【用户频道】tab栏组件 ====== -->
  <van-tabs v-model="active">
    <van-tab :title="item.name" v-for="item in  channels" :key="item.id">
      <ArticleList :channel='item'
       @closePop='closePopFn'></ArticleList>
    </van-tab>
  </van-tabs>

  <!-- 【不要放在<van-tab/>里面，容易受影响】频道列表开关 通过定位 -->
  <!-- ======= 频道列表开关 通过定位 ======= -->
    <div class="bar-btn" @click="showChannel">
      <van-icon name="wap-nav" />
    </div>
    <!-- ======= 弹出层1 ====== -->
    <van-popup v-model="show" :style="{ width: '80%' }">
     <MoreAction ref="moreAction" @delArticel='delArticelFn' @report='reportFn'></MoreAction>
    </van-popup>
    <!-- ======== 弹层2 动作面板======== -->
    <van-action-sheet v-model="showChannelEdit" title="标题">
     <ChannelEdit
     @currentIndex='currentIndexFn'
     :active='active'
     @update-active='updateActiveFn'>
     </ChannelEdit>
    </van-action-sheet>
  </div>
</template>

<script>
import { reqDislikeArticel, reqRepotrArticle } from '@/api/articlelist.js'
// *引入组件
import ArticleList from './components/ArticleList.vue'
import MoreAction from './components/MoreAction.vue'
import ChannelEdit from './components/ChannelEdit.vue'
import { mapActions, mapState } from 'vuex'
export default {
  name: 'home',
  components: {
    ArticleList,
    MoreAction,
    ChannelEdit
  },
  data () {
    return {
      active: 0,
      show: false,
      articleId: '',
      showChannelEdit: false
    }
  },
  /**
   * channels 用户频道 [一进页面就发送请求]
   */
  created () {
    this.getChannelsAsync()
  },
  computed: {
    ...mapState('channels', ['channels'])
  },
  methods: {
    //  ====== channels 用户频道 =======
    ...mapActions('channels', ['getChannelsAsync']),
    // ========== 弹出层 ==========
    closePopFn (articleId) {
      this.show = true
      this.articleId = articleId
      // !优化：返回到【不感兴趣】那一页,要特别注意$nextTick()异步操作
      this.$nextTick(() => {
        this.$refs.moreAction.isReport = false
      })
    },
    // ========== 删除不感兴趣的文章 ==========
    async delArticelFn () {
      // 1.发送ajax
      await reqDislikeArticel(this.articleId)
      // 2.关闭弹出层
      this.show = false
      // 3.删除对应项
      //! active
      const obj = {
        channellistId: this.channellist[this.active].id,
        articleId: this.articleId
      }
      this.$eventBus.$emit('delArticelList', obj)
    },
    // ========== 反馈垃圾内容 ==========
    async reportFn (type) {
      // 1.发送请求告诉服务器要删除的文章
      await reqRepotrArticle(this.articleId, type)
      this.$toast('操作成功')
      // 2.关闭弹出层
      this.show = false
      // 3.删除举报的文章的对应项 【非父子通信】
      const obj = {
        articleId: this.articleId,
        channellistId: this.channellist[this.active].id
      }
      this.$eventBus.$emit('reportArticle', obj)
    },
    // ========== 频道 ========
    showChannel () {
      this.showChannelEdit = true
    },
    // ========= 父传子 ======
    currentIndexFn (index) {
      this.active = index
      this.showChannelEdit = false
    },
    // ======== 优化频道的删除操作 ======
    updateActiveFn (newActive) {
      this.active = newActive
    }
  }
}

</script>

<style lang='scss' scoped>
.home{
  height: 100vh;
 padding-bottom: 90px;
  box-sizing: border-box;
  ::v-deep{
  .van-tabs__line{
    background-color: yellowgreen ;
  }
  // 二级路由-标签栏固定
  .van-tabs_wrap{
    position: fixed;
    padding-top: 44px;
    left: 0;
    right: 30px;
    top: 46px;
  }
  // 设置局部滚动条
  .van-tabs{
    height: 100%;
    .van-tabs__content{
      height: 100%;
      .van-tab__pane{
        height: 100%;
        overflow: auto;
      }
    }
  }
  // 频道管理的开关按钮
  .bar-btn {
    position: fixed;
    right: 5px;
    top: 57px;
    display: flex;
    align-items: center;
    background-color: #fff;
    opacity: 0.8;
    z-index:1;
    .van-icon-wap-nav{
      font-size: 20px;
    }
  }
}
}
</style>
